/**
* @author: zhazhjie
* @email: zhazhjie@vip.qq.com
* @date: 2018-11-05 15:33:58
* @version: 1.0
*/

<template>
  <div>
    <crud-template :config="config" :callbacks="callbacks"/>
    <input type="file" ref="file" accept="video/mp4" style="display: none" @change="handleUpload"/>
    <el-dialog title="视频预览" width="800px" :visible.sync="visible">
      <video ref="video" v-src="curRow.resUrl" class="video" controls autoplay></video>
    </el-dialog>
  </div>
</template>

<script>
import {resourceApi} from "@/api/sys/ResourceApi";
import {sysUserApi} from "@/api/sys/SysUserApi";

export default {
  data() {
    return {
      curRow: {},
      visible: false,
      tableLoading: false,
      uploadLoading:false,
      menuMap: {},
      userList: [],
      config: {
        showIndex: true,
        $dialog: {props: {width: '500px'}},
        $handler: {props: {width: '125px', align: 'center'}},
        $search: {
          sortList: ['userId', 'resTitle']
        },
        columns: [
          {
            label: '用户名',
            field: 'userId',
            disabledInEdit: true,
            render: row => {
              let user = this.userList.find(v => v.id === row.userId) || {};
              return user.userName || '';
            },
            options: () => this.userList,
            defaultProp: {
              text: 'userName',
              value: 'id'
            },
            $search: {
              type: 'select',
              props: {
                clearable: true
              },
            },
            $dialog: {
              type: 'select',
              props: {
                clearable: true
              },
              attrs: {
                style: 'width:100%'
              }
            }
          },
          {
            label: '资源标题',
            field: 'resTitle',
            value: '-'
          },
          {
            label: '视频链接',
            field: 'resUrl',
            value: '-',
            render: row => {
              return <el-button type="primary" plain on-click={() => this.handleWatch(row)}>点击观看</el-button>;
            },
            $dialog: {
              render: row => {
                let {resUrl} = row;
                return (
                  <div>
                    {resUrl?<div>{resUrl}</div>:null}
                    <el-button type="primary" loading={this.uploadLoading} on-click={()=>this.emitUpload(row)}>上传</el-button>
                  </div>
                )
              }
            }
          },
          {
            label: '广告平台',
            field: 'adPlatform',
            value: '-',
            disabledInEdit: true,
            options: [{value: 0, text: "抖音"}, {value: 1, text: "快手"}],
            type: 'text',
            $dialog: {
              type: "select",
              props: {
                clearable: true
              },
              attrs: {
                style: 'width:100%'
              }
            },
          },
          {
            label: '广告ID',
            field: 'adId',
            value: '-',
            disabledInEdit: true,
          },
          {
            label: '豆瓣ID',
            field: 'doubanSubjectId',
            value: '-'
          },
          {
            label: '创建时间',
            field: 'createTime',
            value: '-',
            $dialog: {hide: true}
          },
        ],
        handlerList: [
          {
            label: '编辑',
            icon: 'el-icon-edit'
          },
          // {
          //   label: '删除',
          //   icon: 'el-icon-delete',
          //   click: row => {
          //     this.$crudTmp.handleDelete(row, row.roleName);
          //   }
          // }
        ],
        rules: {
          userId: [
            {required: true, message: '请选择用户', trigger: 'change'},
          ],
          resTitle: [
            {required: true, message: '请输入资源标题', trigger: 'change'},
          ],
          resUrl: [
            {required: true, message: '请上传视频', trigger: 'change'},
          ]
        },
      }
    };
  },
  watch: {
    visible(val) {
      if (!val) {
        this.$refs.video.pause();
      }
    }
  },
  methods: {
    handleWatch(row) {
      this.curRow = row;
      this.visible = true;
    },
    emitUpload(row) {
      this.curRow = row;
      this.$refs.file.click();
    },
    handleUpload(e) {
      let [file] = e.target.files;
      this.upload(file);
    },
    listAllUser() {
      sysUserApi.listAll().then((res) => {
        this.userList = res.data;
      });
    },
    async upload(data) {
      try {
        this.uploadLoading = true;
        const result = await this.$oss.put(
          'video/' + data.name,
          data
        );
        console.log(result);
        this.curRow.resUrl = result.name;
      } catch (e) {
        console.log(e);
      } finally {
        this.$refs.file.value = '';
        this.uploadLoading = false;
      }
    }
  },
  mounted() {
    this.$crudTmp.injectApi(resourceApi);
    this.listAllUser();
  }
};
</script>

<style scoped>
.video {
  width: 100%;
}
</style>
